<template>
  <div class="page">
    <div class="job-item" >
      <div class="flex justify-between align-center name-money">
        <div class="name">{{ job.job_name }}</div>
        <div class="tag-btn ">{{ job.salary }}</div>
      </div>
      <div class="flex align-center company" v-if="job.company">
        <div class="tag-txt">{{ job.company.name }}</div>
        <div class="tag-txt">{{ job.company.scale }}</div>
        <div class="tag-txt">{{ job.company.people }}</div>
      </div>
    </div>

    <div class="hr-content" @click="bindGo('/pages/pjob/hr?id='+job.user.id)">
      <div class="flex justify-between align-center hr-stat">
        <div class="flex align-center hr" v-if="job.user">
          <image class="hr-icon" :src="job.user.avatar"></image>
          <div class="hr-name-txt">
            <div class="name">{{ job.user.nickname }}</div>
            <div class="txt">{{ job.company.name }}·HR</div>
          </div>
        </div>
        <div class="right_arrows ">
          <image class="star-icon" src="/static/icon/right_arrows.png"></image>
        </div>
      </div>
    </div>

    <div class="jon-detail">
      <div class="title">职位详情 </div>
      <div class="flex align-center tags" v-if="job.tags">
        <div class="tag-btn money" v-for="item in job.tags.split('，')">{{item}}</div>
      </div>
      <div class="title">职位详情 </div>
      <div class="mark">
       {{job.desc}}
      </div>
    </div>

    <div class="submit">立即沟通</div>
  </div>
</template>

<script setup lang="ts">
  import {parseQuery} from "../../utils/URLParam";
  import {onMounted, shallowRef} from "vue";
  import {jobDetail_data} from "../../api/Job";
  import {goUrl} from "../../utils/UniUtil";

  const job = shallowRef({});

  onMounted(() => {
    const {id} = parseQuery()
    jobDetail_data(id).then(res => {
      job.value = res
    })
  })

  const bindGo = (url: string) => {
    goUrl(url)
  }
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  padding-bottom: 100rpx;
  position: relative;
}
.tag-btn {
  height: 40rpx;
  background: rgba(36, 250, 246, 0.38);
  border-radius: 16rpx;
  padding: 0 16rpx;
  line-height: 40rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #0D3333;
}
.job-item {
  height: 186rpx;
  background: #FFFFFF;
  border-radius: 24rpx;
  padding: 0 32rpx;

  .tag-txt {
    height: 34rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #0D3333;
    line-height: 34rpx;
  }
  .name-money {
    padding: 34rpx 0 24rpx;
    .name {
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #0D3333;
      line-height: 44rpx;
    }
  }
  .company {
    padding: 0 0 16rpx;
    gap: 48rpx;
  }


}
.hr-content {
  height: 160rpx;
  border-top: 2rpx solid rgba(0,0,0,0.08);
  border-bottom: 2rpx solid rgba(0,0,0,0.08);
  padding: 32rpx 0;
  margin: 0 32rpx;
  .hr-stat {
    .hr {
      .hr-icon {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
      }
      .hr-name-txt {
        padding: 0 22rpx;
        .name {
          height: 34rpx;
          font-size: 24rpx;
          font-weight: 500;
          color: #000000;
          line-height: 34rpx;
          margin-bottom: 12rpx;
        }
        .txt {
          height: 34rpx;
          font-size: 24rpx;
          font-weight: 400;
          color: #000000;
          line-height: 34rpx;
        }
      }
    }
    .star {
      width: 42rpx;
      height: 42rpx;
      .star-icon{
        width: 42rpx;
        height: 42rpx;
        background: #0D3333;
      }
    }
    .right_arrows {
      .star-icon {
        width: 8rpx;
        height: 24rpx;
        //border: 4rpx solid #979797;
      }
    }
  }
}
.jon-detail {
  //height: 0;
  flex: 1;
  padding: 0 32rpx;
  .title {
    padding: 32rpx 0 16rpx;
  }
  .mark {
    font-size: 24rpx;
    font-weight: 400;
    color: #0D3333;
    line-height: 34rpx;
  }
  .tags {
    padding: 0 0 28rpx;
    gap: 16rpx;
  }
}
.submit {
  position: fixed;
  width: calc(100%  - 64px);
  bottom: 32rpx;
  height: 64rpx;
  background: #0D3333;
  border-radius: 20rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 64rpx;
  text-align: center;
  margin: 32rpx;
}
</style>
